@import './variables.scss';
@mixin colorBtn($color) { background: $color;
  &:hover { color: $color;
    &:before, &:after { background: $color; }
  }
}
.blue-btn { @include colorBtn($blue) }
.light-blue-btn { @include colorBtn($light-blue) }
.red-btn { @include colorBtn($red) }
.pink-btn { @include colorBtn($pink) }
.green-btn { @include colorBtn($green) }
.tiffany-btn { @include colorBtn($tiffany) }
.yellow-btn { @include colorBtn($yellow) }
.pan-btn { font-size: 14px; color: #fff; padding: 14px 36px; border-radius: 8px; border: none; outline: none; transition: 600ms ease all; position: relative; display: inline-block;
  &:hover { background: #fff;
    &:before, &:after { width: 100%; transition: 600ms ease all; }
  }
  &:before, &:after { content: ''; position: absolute; top: 0; right: 0; height: 2px; width: 0; transition: 400ms ease all; }
  &::after { right: inherit; top: inherit; left: 0; bottom: 0; }
}
.custom-button { display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; background: #fff; color: #fff; -webkit-appearance: none; text-align: center; box-sizing: border-box; outline: 0; margin: 0; padding: 10px 15px; font-size: 14px; border-radius: 4px; }
.tx-c{text-align:center}
span.ctrl{display: inline-block; margin: 0 5px;cursor: pointer;color: #409EFF;font-size: 12px;}
span.ctrl.del{color: #F56C6C;}
